import React from 'react';
import { Form, Input, Button, TreeSelect, message } from 'antd';
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 6,
    span: 16,
  },
};

const AddTemplate = (props) => {
  const onFinish = (values) => {
    let searchMsg = {}
    console.log(values);
    searchMsg.key = Date.now()
    searchMsg.number = values.number
    searchMsg.name = values.name
    searchMsg.level = values.level
    searchMsg.authority = values.responsible1 + "/" + values.responsible2 + "/" + values.responsible3 + "/" + values.responsible4 + "/" + values.responsible5
    message.success("添加成功！");
    props.ok(searchMsg)
  };
  const onFinishFailed = (errorInfo) => {
    message.error("请重新输入！");
  };
  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="权限组编号"
        name="number"
        rules={[
          {
            required: true,
            message: '请输入权限组编号!',
          },
          {
            max: 5,
            message: "权限组编号的最大长度为5"
          }
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="权限组名字"
        name="name"
        rules={[
          {
            required: true,
            message: '请输入模板名字!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={`level`}
        label="权限等级">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '顶级',
              label: 'level1',
            },
            {
              value: 'level2',
              label: 'level2',
            },
            {
              value: 'level3',
              label: 'level3',
            },
            {
              value: 'level4',
              label: 'level4',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible1`}
        label="权限1">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '系统首页',
              label: '系统首页',
            },
            {
              value: '个人信息',
              label: '个人信息',
            },
            {
              value: '商品列表',
              label: '商品列表',
            },
            {
              value: '销售报表',
              label: '销售报表',
            },
            {
              value: '出库管理',
              label: '出库管理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible2`}
        label="权限2">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '系统首页',
              label: '系统首页',
            },
            {
              value: '个人信息',
              label: '个人信息',
            },
            {
              value: '商品列表',
              label: '商品列表',
            },
            {
              value: '销售报表',
              label: '销售报表',
            },
            {
              value: '出库管理',
              label: '出库管理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible3`}
        label="权限3">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '系统首页',
              label: '系统首页',
            },
            {
              value: '个人信息',
              label: '个人信息',
            },
            {
              value: '商品列表',
              label: '商品列表',
            },
            {
              value: '销售报表',
              label: '销售报表',
            },
            {
              value: '出库管理',
              label: '出库管理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible4`}
        label="权限4">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '系统首页',
              label: '系统首页',
            },
            {
              value: '个人信息',
              label: '个人信息',
            },
            {
              value: '商品列表',
              label: '商品列表',
            },
            {
              value: '销售报表',
              label: '销售报表',
            },
            {
              value: '出库管理',
              label: '出库管理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item
        name={`responsible5`}
        label="权限5">
        <TreeSelect
          rules={[
            {
              required: true,
              message: '请输入所属部门!',
            },
          ]}
          treeData={[
            {
              value: '系统首页',
              label: '系统首页',
            },
            {
              value: '个人信息',
              label: '个人信息',
            },
            {
              value: '商品列表',
              label: '商品列表',
            },
            {
              value: '销售报表',
              label: '销售报表',
            },
            {
              value: '出库管理',
              label: '出库管理',
            },
          ]}
        />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          提交
          </Button>
        <Button style={{ marginLeft: "2rem" }} onClick={() => { props.cancel() }}>
          取消
          </Button>
      </Form.Item>
    </Form>
  );
}

export default AddTemplate;
